{% extends "base.html" %}

{% block title %}歌曲列表 - 音乐社区{% endblock %}

{% block content %}
<div class="music-container">
    <!-- 播放器控制面板 -->
    <div class="player-panel">
        <audio id="audio-player" style="display: none" controls>
            <source src="" type="audio/mpeg">
            您的浏览器不支持音频播放
        </audio>

        <!-- 自定义控制条 -->
        <div class="custom-controls">
            <button id="prev-btn" class="control-btn">⏮</button>
            <button id="play-btn" class="control-btn">▶</button>
            <button id="next-btn" class="control-btn">⏭</button>
            <input type="range" id="progress-bar" value="0" class="progress">
            <span id="current-time">00:00</span>/<span id="total-time">00:00</span>
            <div class="volume-control">
                <span>🔊</span>
                <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
            </div>
        </div>
    </div>

    <!-- 歌曲列表 -->
    <div class="song-list">
        <h2>全部歌曲</h2>
        <div class="list-header">
            <span>序号</span>
            <span>歌曲名称</span>
            <span>歌手</span>
            <span>时长</span>
        </div>
        {% for song in songs %}
        <div class="song-item" data-src="{{ url_for('static', filename='songs/' + song.file ) }}" data-index="{{ loop.index0 }}">
            <div class="song-index">{{ loop.index }}</div>
            <div class="song-title">{{ song.title }}</div>
            <div class="song-artist">{{ song.artist }}</div>
            <div class="song-duration">{{ song.duration }}</div>
        </div>
        {% endfor %}
    </div>
</div>

<style>
    /* 更新后的样式 */
    .music-container {
        max-width: 1200px;
        margin: 20px auto;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .player-panel {
        padding: 20px;
        background: #f8f9fa;
        border-bottom: 1px solid #eee;
    }

    .custom-controls {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .control-btn {
        background: #3498db;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 20px;
        cursor: pointer;
        transition: opacity 0.3s;
    }

    .control-btn:hover {
        opacity: 0.9;
    }

    .progress {
        flex: 1;
        height: 5px;
        accent-color: #3498db;
    }

    .volume-control {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    #volume {
        width: 100px;
    }

    .song-list {
        padding: 20px;
    }

    .list-header {
        display: grid;
        grid-template-columns: 50px 2fr 1fr 80px;
        padding: 10px;
        font-weight: bold;
        border-bottom: 2px solid #eee;
    }

    .song-item {
        display: grid;
        grid-template-columns: 50px 2fr 1fr 80px;
        padding: 12px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        transition: all 0.3s;
    }

    .song-item:hover {
        background: #f8f9fa;
    }

    .song-item.playing {
        background: #e3f2fd;
        font-weight: 500;
    }
</style>

<script>
    // 改进后的播放器逻辑
    const audioPlayer = document.getElementById('audio-player');
    const playBtn = document.getElementById('play-btn');
    const progressBar = document.getElementById('progress-bar');
    const volumeControl = document.getElementById('volume');
    let currentSongIndex = 0;
    const songItems = Array.from(document.querySelectorAll('.song-item'));

    // 时间格式化函数
    const formatTime = (seconds) => {
        const minutes = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
    };

    // 更新播放进度
    const updateProgress = () => {
        progressBar.value = (audioPlayer.currentTime / audioPlayer.duration) * 100 || 0;
        document.getElementById('current-time').textContent = formatTime(audioPlayer.currentTime);
    };

    // 切换歌曲
    const playSong = (index) => {
        currentSongIndex = index;
        const songItem = songItems[index];
        audioPlayer.src = songItem.dataset.src;
        audioPlayer.play();

        // 更新歌曲高亮
        songItems.forEach(item => item.classList.remove('playing'));
        songItem.classList.add('playing');
    };

    // 歌曲点击事件
    songItems.forEach((item, index) => {
        item.addEventListener('click', () => playSong(index));
        playBtn.textContent = '⏸';
    });

    // 播放按钮
    playBtn.addEventListener('click', () => {
        audioPlayer.paused ? audioPlayer.play() : audioPlayer.pause();
        playBtn.textContent = audioPlayer.paused ? '▶' : '⏸';
    });

    // 进度条控制
    progressBar.addEventListener('input', (e) => {
        const seekTime = (e.target.value / 100) * audioPlayer.duration;
        audioPlayer.currentTime = seekTime;
    });

    // 音量控制
    volumeControl.addEventListener('input', (e) => {
        audioPlayer.volume = e.target.value;
    });

    // 上下曲切换
    document.getElementById('prev-btn').addEventListener('click', () => {
        currentSongIndex = (currentSongIndex - 1 + songItems.length) % songItems.length;
        playSong(currentSongIndex);
    });

    document.getElementById('next-btn').addEventListener('click', () => {
        currentSongIndex = (currentSongIndex + 1) % songItems.length;
        playSong(currentSongIndex);
    });

    // 自动播放下一曲
    audioPlayer.addEventListener('ended', () => {
        currentSongIndex = (currentSongIndex + 1) % songItems.length;
        playSong(currentSongIndex);
    });

    // 更新总时长
    audioPlayer.addEventListener('loadedmetadata', () => {
        document.getElementById('total-time').textContent = formatTime(audioPlayer.duration);
    });

    // 实时更新时间
    audioPlayer.addEventListener('timeupdate', updateProgress);

    // 初始化播放器
    if (songItems.length > 0) {
        playSong(0);
    }
</script>
{% endblock %}